<template>
  <div>
    <el-form :model="form" ref="form" label-position="top" label-width="80px">
      <div class="line"></div>
      <div class="label-item">批量修改角色：
        <el-radio-group v-model="form.roleType">
          <el-radio :label="3">{{$t('agentSetting.agentSetting13')}}</el-radio>
          <el-radio :label="6">{{$t('agentSetting.agentSetting14')}}</el-radio>
        </el-radio-group>
      </div>
      <el-form-item :label="''" style="margin-top: 0px">
        <el-select class="select"
                   v-model="form.role"
                   multiple
                   collapse-tags
                   size="mini"
                   filterable>
          <el-option v-for="item in roles"
                     :label="item.display_name"
                     :key="item._id"
                     :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="'批量修改座席接待会话范围'">
        <el-select v-model.trim="form.minImDealCount" size="mini" style="width: 130px">
          <el-option
            v-for="item in minNumber"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <span style="margin: 0px 10px">--</span>
        <el-select v-model.trim="form.maxImDealCount" size="mini" style="width: 140px">
          <el-option
            v-for="item in maxNumber"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="批量修改在线咨询自动领取">
        <el-switch v-model="form.imClaimStatus"
                   active-value="open"
                   inactive-value="close"></el-switch>
      </el-form-item>
      <el-form-item label="批量修改座席状态">
        <el-select v-model="form.status" style="width: 320px">
          <el-option value="enable" label="启用"></el-option>
          <el-option value="disabled" label="停用"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import AgentSelect from '@/components/public-modules/cache/AgentSelect'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'BacthEditAgentInfo',
    data () {
      return {
        maxNumber: [], // 渲染座席最大能同时接待会话下拉
        minNumber: [], // 渲染座席最小能同时接待会话下拉
        customize: [],
        form: {
          status: 'enable',
          imClaimStatus: 'open',
          minImDealCount: '1',
          maxImDealCount: '1',
          role: [],
          roleType: 3
        },
        form1: {}
      }
    },
    props: {
      total: Number,
      roles: Array
    },
    watch: {
    },
    methods: {
      onSubmit () {
        let data = {
          query: deepClone(this.$store.state.config.agentConfig.queryAgent),
          set: {},
          total: this.total
        }
        delete data.query.page
        delete data.query.limit
        if (this.form.role.length === 0) {
          this.$message.error(this.$t('config.agent.pleaseRole'))
          return
        }
        data.set.role = this.form.role
        if (this.form.roleType === 3) {
          data.set.flag = 'roleAdd'
        } else {
          data.set.flag = 'role'
        }
        // 判断座席最大能同时处理邮件数输入是否为正整数，座席最大能同时接待会话是否大于座席最小能同时接待会话
        if (parseInt(this.form.minImDealCount) > parseInt(this.form.maxImDealCount)) {
          this.$message.error(this.$t('config.agent.imDealErroTip'))
          return
        }
        data.set.status = this.form.status
        data.set.minImDealCount = this.form.minImDealCount
        data.set.maxImDealCount = this.form.maxImDealCount
        data.set.imClaimStatus = this.form.imClaimStatus
        this.$emit('BacthEditAgentInfo', data)
        // console.log(data)
      },
      // 循环座席能同时接待会话数
      forNumber (num, obj) {
        for (let i = 1; i < num + 1; i++) {
          obj.push({
            label: i + '',
            value: i + ''
          })
        }
      },
      open () {
        this.form = {
          status: 'enable',
          imClaimStatus: 'open',
          minImDealCount: '1',
          maxImDealCount: '1',
          role: [],
          roleType: 3
        }
      }
    },
    components: {
      AgentSelect
    },
    beforeMount () {
      this.forNumber(200, this.maxNumber)
      this.forNumber(50, this.minNumber)
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
  .main-color
    color $c-main
  .label-item
    margin-left: 20px;
    margin-top: 24px
  .line
    width: 320px;
    height: 1px;
    background: #dcdfe6;
    margin: 17px 20px;
  select
    margin-top 10px
    width 100%
    height 120px
  .unbind
    color $c-email
    cursor pointer
  .el-select
    width 70%
    .el-input
      width 100%
  .el-input
    width 70%
  .bacthTip
    color $c-prompt
  .el-form-item
    margin-top 10px
    padding-left 20px
  .ui-affix
    margin-top 36px
    padding-bottom 0
  .search
    text-align center
    margin-top 20px
</style>
